<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getAllComments, deleteComment } from "@/api/comment";

let commentList = ref([]); // 评价数组信息
let currentPage = ref(1); // 当前页码
let pages = ref(0); // 总页码
let total = ref(0); // 总记录数

// 从 localStorage 拿出 userId
const userId = Number(localStorage.getItem("userId") || 0);

onMounted(() => {
  getAllComment();
});

// 查询评论列表
async function getAllComment(pageNum = 1) {
  try {
    const response = await getAllComments(pageNum, userId);
    console.log(response);

    const data = response.data.data;
    commentList.value = data.list || [];
    currentPage.value = data.pageNum;
    pages.value = data.totalPage;
    total.value = data.total || 0;
  } catch (error) {
    console.error("获取评论失败：", error);
    commentList.value = [];
    total.value = 0;
  }
}

// 删除评论
async function removeComment(commentId) {
  if (!commentId) {
    ElMessage.error("无法删除：未找到评论ID");
    return;
  }

  if (window.confirm("你确定要删除这条评价吗？")) {
    try {
      const response = await deleteComment(commentId, userId);
      console.log(response);

      // 删除成功后刷新当前页数据
      await getAllComment(currentPage.value);
      ElMessage.success("删除成功");
    } catch (error) {
      console.error("删除失败：", error);
      ElMessage.error("删除失败");
    }
  }
}
</script>

<template>
  <div class="comment-container">
    <h2 class="title">我的评价</h2>

    <!-- 无评论提示 -->
    <div v-if="total === 0" class="no-comment">
      还没有评价信息~
    </div>

    <!-- 评论列表 -->
    <div v-else class="comment-list">
      <div 
        v-for="comment in commentList" 
        :key="comment.commentId" 
        class="comment-item"
      >
        <div class="comment-header">
          <span class="hotel-id">酒店名称: {{ comment.hotelName }}</span>
          <button 
            @click="removeComment(comment.commentId)" 
            class="delete-btn"
          >
            删除
          </button>
        </div>

        <div class="comment-content">
          <div class="rating">评分: {{ comment.rating }} 星</div>
          <div class="content">评价内容: {{ comment.comment }}</div>
          <div class="create-time">创建时间: {{ comment.createTime }}</div>

          <!-- 只有有图片时才显示图片区域，不留空白 -->
          <div 
            v-if="comment.images && comment.images.length > 0" 
            class="image-list"
          >
            <el-image
              v-for="(img, index) in comment.images"
              :key="index"
              :src="img"
              :preview-src-list="comment.images"
              fit="cover"
              class="comment-image"
            />
          </div>

          <!-- 回复信息 -->
          <div v-if="comment.replyContent" class="reply-section">
            <div class="reply-content">回复内容: {{ comment.replyContent }}</div>
            <div class="reply-time">回复时间: {{ comment.replyTime }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页信息 -->
    <div v-if="total > 0" class="pagination-container">
      <div class="pagination-info">
        <button 
          v-if="currentPage > 1" 
          @click="getAllComment(currentPage - 1)"
          class="pagination-btn"
        >
          上一页
        </button>

        <span class="page-text">
          当前是第 {{ currentPage }} 页，共有 {{ pages }} 页，总计 {{ total }} 条记录
        </span>

        <button 
          v-if="currentPage < pages" 
          @click="getAllComment(currentPage + 1)"
          class="pagination-btn"
        >
          下一页
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.comment-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 24px;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}
.no-comment {
  text-align: center;
  color: #999;
  font-size: 18px;
  padding: 60px 0;
  background-color: #fafafa;
  border-radius: 8px;
}

.comment-list {
  margin-bottom: 30px;
  max-height: 400px;
  overflow-y: auto;
}

.comment-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  font-size: 14px;
}

.comment-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.delete-btn {
  padding: 8px 16px;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.delete-btn:hover {
  background-color: #f78989;
  transform: translateY(-1px);
}

.comment-content {
  color: #333;
}

.rating {
  font-size: 16px;
  margin-bottom: 10px;
  color: #f56c6c;
  font-weight: bold;
}

.content {
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 1.5;
  color: #555;
}

.create-time,
.reply-content,
.reply-time {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
}

.reply-section {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  margin: 15px 0;
  border-left: 3px solid #409eff;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-list:not(:empty) {
  margin-top: 10px;
}

.comment-image {
  width: 120px;
  height: 120px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
}

.pagination-container {
  display: flex;
  justify-content: center;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  flex-wrap: wrap;
}

.pagination-btn {
  padding: 10px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.pagination-btn:hover {
  background-color: #66b1ff;
  transform: translateY(-1px);
}

.page-text {
  font-size: 16px;
  color: #666;
  white-space: nowrap;
}
</style>
